<template>
  <div class="item-container">

    <div class="photo">
      <img :src="item.img|formatImg('128.180')" />
    </div>

    <div class="content">
      <h1>
        {{item.nm}}
        <i :class="item.version" />
      </h1>
      <p>
        <span v-if="item.globalReleased" class="score">
          <label>观众评 </label>
          {{item.sc}}</span>
        <span v-else class="score">{{item.wish}}
          <label>
            人想看
          </label>
        </span>
      </p>
      <p>主演：{{item.star}}</p>
      <p>{{item.showInfo}}</p>
    </div>

    <div class="btn-box">

      <div class="btn" v-if="item.globalReleased">购票</div>
      <div class="presell" v-else>预售</div>
    </div>

  </div>
</template>
<script>
export default {
  props: ["item"]
}
</script>

<style lang="scss" scoped>
@import "assets/style/mixin.scss";
.item-container {
  font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
  box-sizing: border-box;
  display: flex;
  height: 115px;
  padding: 12px 15px;
  @include border_1px(#666);
  .photo {
    flex: 60;
    img {
      width: 64px;
    }
  }
  .content {
    width: 0px;
    flex: 225;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    h1 {
      font-size: 17px;
      color: #333;
      line-height: 30px;
    }
    p {
      line-height: 20px;
      font-size: 13px;
      width: 98%;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #666;
    }
    .score {
      label {
        font-size: 13px;
        color: #666;
      }
      color: #faaf00;
      font-size: 15px;
    }
  }

  .btn-box {
    flex: 60;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 47px;
      line-height: 27px;
      background: #f03d37;
      border-radius: 6px;
      text-align: center;
      color: white;
    }
    .presell {
      width: 47px;
      line-height: 27px;
      background: #3c9fe6;
      border-radius: 6px;
      text-align: center;
      color: white;
    }
  }

  .v3d.imax {
    background: url("");
    display: inline-block;
    width: 43px;
    height: 14px;
    background-size: contain;
  }

  .v3d {
    background: url("");
  }

  &::after {
    left: 90px;
    right: 15px;
  }
}
</style>

